<template>
<div>
    <div class="box" :style="{width: width + 'px'}"></div>
    <button @click="change">click</button>
    <div class="box1"></div>
    <hr/>

    <button @click="toggle">click</button>
    <transition name="fade">
    <h1 v-show="showTitle">你好 vue3</h1>
    </transition>
</div>
</template>

<script setup>
import { ref } from 'vue'
const width = ref(100)

function change() {
    width.value += 100
}

const showTitle = ref(true)
function toggle() {
    showTitle.value = !showTitle.value
}
</script>

<style>
.box {
    height: 100px;
    background: red;
    transition: width 1s linear;
}

.box1{
    width: 30px;
    height: 30px;
    position: relative;
    background: rgb(64, 230, 105);
    animation: move 2s linear infinite;
}

@keyframes move {
    0% {left: 0px}
    50% {left: 200px}
    100% {left: 0px;}
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s linear;
}
.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}
</style>
